<template>
  <view>
    <view class="head-tab flex-box">
      <view
        v-if="tabBars.length"
        class="tab-bar-item"
        v-for="(item,index) in tabBars"
        :key="index"
        @click="changeTabs(index)"
      >
        <view class="tab-bar-title" :class="tabIndex === index?'sub-cate-active':''">{{item}}</view>
        <view class="underline" v-if="tabIndex === index"></view>
      </view>
    </view>

    <view class="flex-column" style="width: 750upx;height: calc(100% - 100upx)">
      <view v-if="dataList.length>0">
        <view v-for="(item,index) in dataList" :key="index">
          <view v-if="tabIndex == 0" class="flex-box info-box" @click="goStudy(item)">
            <view class="info-img">
              <image
                class="info-img"
                :src="item.coverUrl[0]"
                v-if="item.coverUrl"
                mode="aspectFill"
              />
            </view>
            <view style="margin-left: 28upx;flex:1;height: 100%;">
              <view class="info-title">{{item.title}}</view>
              <view class="info-tips">{{item.brief}}</view>
            </view>
            <view>
              <cmd-progress
                :percent="item.watchedProgress"
                :size="100"
                :stroke-color="color"
                :BgId="String(index)"
                :InId="String(index)"
              >
                <!-- <icon v-if="item.watchedProgress == 100" type="success" size="60" color="#333333" /> -->
                <text style="font-size:24upx; color: #333333;">{{ item.watchedProgress }}%</text>
                <view slot="canvas">
                  <canvas class="CanvasBox strokeCanvas" :canvas-id="String(index)"></canvas>
                  <canvas class="CanvasBox trailCanvas" :canvas-id="String(index)"></canvas>
                </view>
              </cmd-progress>
              <view style="font-size:22upx;color: #666666;text-align: center;margin-top: 10upx;">已学习</view>
            </view>
          </view>
          <view v-else class="info-box">
            <image class="info-img" :src="item.imgUrl" mode="aspectFill" />
            <view style="margin-left: 28upx;flex:1;display: flex;flex-direction: column;">
              <view class="info-title">{{item.title}}</view>
              <view class="info-tips">
                <!-- {{item.courseInfo.trainCourse.courseBrief}} -->
                培训开始时间：{{item.entryStartTime}}
              </view>
              <view class="apply-btn-box">
                <button
                  v-if="item.showStatus == 0"
                  type="primary"
                  class="primary apply-btn"
                  @click="cancel(item.id)"
                >取消报名</button>
                <button
                  v-if="item.showStatus !== 0"
                  type="primary"
                  class="primary apply-btn"
                  @click="goAttendance(item)"
                >考勤记录</button>
                <button
                  v-if="item.showStatus == 2"
                  type="primary"
                  class="primary apply-btn"
                  @click="goComment(item.id)"
                >去评价</button>
              </view>
            </view>
          </view>
        </view>
        <uni-load-more :status="loadingType" :contentText="contentText"></uni-load-more>
      </view>
      <view v-else class="tips">暂无相关内容</view>
    </view>

    <model v-if="hidden">
      <view class="model-content">确认取消本次报名吗？</view>
      <view class="model-footer">
        <button class="model-footer-btn cancel" @click="hidden=false">我再想想</button>
        <button type="primary" class="model-footer-btn primary" @click="cancelApply()">取消报名</button>
      </view>
    </model>
  </view>
</template>

<script>
import { post_md5 } from '../../common/request'
export default {
  data() {
    return {
      tabIndex: 1,
      // tabBars: ['在线学习', '培训报名'],
      tabBars: [],
      dataList: [],
      page: 1,
      loadingType: 'more', //定义加载方式 0---contentdown  1---contentrefresh 2---contentnomore
      contentText: {
        contentdown: '上拉加载更多',
        contentrefresh: '正在加载...',
        contentnomore: '没有更多数据了'
      },
      hidden: false,
      trainId: '',
      color: '#02A8F4'
    }
  },
  onShow() {
    // this.getTrainDate()
    this.getTrainCoures()
  },
  onPullDownRefresh: function() {
    //下拉刷新的时候请求一次数据
    this.page = 1
    this.loadingType = 'more'
    this.dataList = []
    switch (this.tabIndex) {
      case 0:
        this.getTrainDate()
        break
      case 1:
        this.getTrainCoures()
        break
    }
  },
  onReachBottom: function() {
    switch (this.tabIndex) {
      case 0:
        this.getTrainDate()
        break
      case 1:
        this.getTrainCoures()
        break
    }
  },
  methods: {
    // tab切换
    changeTabs(index) {
      this.tabIndex = index
      this.page = 1
      this.loadingType = 'more'
      this.dataList = []
      switch (index) {
        case 0:
          this.getTrainDate()
          break
        case 1:
          this.getTrainCoures()
          break
      }
    },

    // 获取名师讲习
    getTrainCoures() {
      if (this.loadingType !== 'more') {
        //loadingType!=0;直接返回
        return false
      }
      this.loadingType = 'loading'
      uni.showNavigationBarLoading() //显示加载动画
      const params = {
        userId: uni.getStorageSync('userId'),
        page: this.page
      }
      post_md5('/user/getUserTrainCouresByUserId', params, false).then(res => {
        console.log(res)
        this.page++
        uni.stopPullDownRefresh()
        if (res.data) {
          for (let i in res.data.list) {
            this.dataList.push(res.data.list[i])
          }
          if (this.dataList.length > 5) {
            this.loadingType = 'more'
          } else {
            this.loadingType = 'noMore'
          }
          uni.hideNavigationBarLoading() //关闭加载动画
        } else {
          this.loadingType = 'noMore'
          uni.hideNavigationBarLoading() //关闭加载动画
        }
      })
    },

    // 获取矿校远教
    getTrainDate() {
      if (this.loadingType !== 'more') {
        //loadingType!=0;直接返回
        return false
      }
      this.loadingType = 'loading'
      uni.showNavigationBarLoading() //显示加载动画
      const params = {
        userId: uni.getStorageSync('userId'),
        page: this.page
      }
      post_md5('/user/getUserTrainDateByUserId', params, false).then(res => {
        console.log(res)
        this.page++
        uni.stopPullDownRefresh()
        if (res.data.list.length > 0) {
          for (let i in res.data.list) {
            this.dataList.push(res.data.list[i])
          }
          if (this.dataList.length > 5) {
            this.loadingType = 'more'
          } else {
            this.loadingType = 'noMore'
          }
          uni.hideNavigationBarLoading() //关闭加载动画
        } else {
          this.loadingType = 'noMore'
          uni.hideNavigationBarLoading() //关闭加载动画
        }
      })
    },

    // 打开名师讲习取消报名弹窗
    cancel(id) {
      this.hidden = true
      this.trainId = id
    },

    // 取消报名
    cancelApply() {
      const params = {
        userId: uni.getStorageSync('userId'),
        trainId: this.trainId
      }
      post_md5('/train/cancelEntryTrainCourse', params).then(res => {
        this.hidden = false
        if (res.data) {
          uni.showToast({
            title: '已取消报名',
            icon: 'none'
          })
          this.loadingType = 'more'
          this.page = 1
          this.dataList = []
          this.getTrainCoures()
        }
      })
    },

    // 名师讲习去评价
    goComment(id) {
      uni.navigateTo({
        url: 'comment?id=' + id
      })
    },

    // 学习
    goStudy(item) {
      if (item.type == 1) {
        uni.navigateTo({
          url: '../train/info?id=' + item.trainDataId
        })
      } else {
        uni.navigateTo({
          url: '../train/detail?id=' + item.trainDataId
        })
      }
    },

    // 查看考勤记录
    goAttendance(item) {
      uni.navigateTo({
        url:
          '../train-records/attendance?id=' +
          item.id +
          '&start=' +
          item.trainStartTime +
          '&end=' +
          item.trainEndTime
      })
    }
  }
}
</script>

<style>
.head {
  border-bottom: 1px solid #f5f5f5;
}

.tab-bar-title {
  width: 375upx;
  /* color: #999999;
		font-size: 26upx; */
}

.underline {
  width: 90upx;
  /* height: 4upx;
		border-radius: 2upx; */
}

.sub-cate-active {
  /* color: #333333;
		font-weight: 600; */
}

.tips {
  color: #999999;
  text-align: center;
  margin-top: 100upx;
}

.info-box {
  width: 650upx;
  height: 204upx;
  border-radius: 40upx;
  box-shadow: 10upx 6upx 30upx #e2e8ec;
  margin-top: 30upx;
  padding: 20upx;
  display: flex;
  position: relative;
  overflow: hidden;
}

.info-img {
  width: 204upx;
  height: 204upx;
  border-radius: 16upx;
}

.info-title {
  font-size: 28upx;
  font-weight: bold;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.info-tips {
  font-size: 22upx;
  font-weight: 400;
  color: #848484;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin-top: 10upx;
}

.apply-btn-box {
  position: absolute;
  bottom: 20upx;
  display: flex;
  width: 420upx;
  align-items: center;
  justify-content: flex-end;
}

.apply-btn {
  width: 168upx;
  height: 50upx;
  border-radius: 0px 22upx 22upx 28upx;
  margin-right: 20upx;
  font-size: 26upx;
  text-align: center;
}
</style>
